import React, { Component } from 'react'
import axios from 'axios'
import betterScroll from 'better-scroll'
export default class Cinema extends Component {
  constructor() {
    super()
    // axios请求数据
    // axios.get("请求数据").then(res=>{}).catch(err=>{// })
    // 请求数据
    // axios.get("https://m.maizuo.com/gateway?cityId=440300&ticketFlag=1&k=8621223").then(res=>{
    //   console.log(res);
    // }).catch(err=>{
    //   console.log(err);
    // })
    this.state={
      cinemaList:[],
      // 备份数据
      backcinemaList:[]
    }
    axios({
      url: "https://m.maizuo.com/gateway?cityId=440300&ticketFlag=1&k=8621223",
      method:"get",
      headers: {
        'X-Client-Info': '{ "a": "3000", "ch": "1002", "v": "5.2.0", "e": "16588855641625945769246721", "bc": "440300" }',
        'X-Host': 'mall.film-ticket.cinema.list'
      }
    }).then(res=>{
        // console.log(res.data.data.cinemas);
        this.setState({
          cinemaList:res.data.data.cinemas,
          backcinemaList:res.data.data.cinemas
        },()=>{
          // 使用setSate的异步更新，第二个参数
          new betterScroll(".wrapper")
        })

       

      }).catch(err=>{
        console.log(err);
      })
  }

  render() {
    return (
      <div>
        <div>
          <input type="text" onChange={this.handleChange}/>
          <div className='wrapper' style={{height:'500px',overflow:"hidden"}}>
          <div className='content'>
          {
            this.state.cinemaList.map(item=>
              <dl key={item.cinemaId}>
                <dt>{item.name}</dt>
                <dd>{item.address}</dd>
                </dl>
            )
          }
          </div>
          </div>
        </div>
      </div>
    )
  }
  handleChange=(e)=>{
    // console.log("input",e.target.value);
    let newlist=this.state.backcinemaList.filter(item=>item.name.toUpperCase().includes(e.target.value.toUpperCase()) || item.address.toUpperCase().includes(e.target.value.toUpperCase()))
    // console.log(newlist);
    this.setState({
      cinemaList:newlist
    })
  }
}
